<template>
  <div class="group">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">群组管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')">新增群组</el-button>
      </div>
      <s-table :table="table" @http="tableWatch">
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="danger" @click="tableMultiDelete">多选删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template scope="s">
            <el-tooltip placement="top">
              <div slot="content">查看群组成员</div>
              <el-button type="info" icon="search" size="mini" @click="dialogSearchOpen(s.row)"></el-button>
            </el-tooltip>
            <el-tooltip placement="top">
              <div slot="content">更多可用操作</div>
              <el-popover
                popper-class="demo-table-expand"
                placement="right"
                :title="'更多可用操作 角色: ' + (s.row.role || '等待加载中')"
                trigger="click">
                <slot name="content">
                  <div style="width: 427px">
                    <el-button type="info" icon="search" size="mini" @click="dialogAuthSearchOpen(s.row)">权限详情</el-button>
                    <el-button type="success" icon="edit" size="mini" v-show="s.row.role === '群主'?true:s.row.role === '管理员'" @click="tableEdit(s.row)">编辑群组</el-button>
                    <el-button type="warning" icon="edit" size="mini" v-show="s.row.role === '群主'" @click="dialogDatasOpen(s.row)">分配数据集</el-button>
                    <el-button type="info" icon="edit" size="mini" v-show="s.row.role === '群主'" @click="dialogAuthOpen(s.row)">分配功能</el-button>
                    <el-button type="danger" icon="delete" size="mini" v-show="s.row.role === '群主'" @click="tableDelete(s.row)">解散群组</el-button>
                  </div>
                </slot>
                <el-button slot="reference" type="info" icon="more" :plain="true" size="mini" class="__reference" @click="moreClick(s.row)"></el-button>
              </el-popover>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-form-item label="群组名称" prop="name">
          <el-input type="text"
                    class="input"
                    v-model="autoVueTable_gName"
                    placeholder="群组名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>

    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}<span>{{formDialog.id ? ('群组编码：' + formDialog.gCode) : ''}}</span></p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 10, offset: 0}">
            <el-form-item prop="gName" label="群组名称">
              <el-input type="text"
                        v-model="formDialog.gName"
                        placeholder="群组名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 10, offset: 2}">
            <el-form-item prop="rentId" label="所属客户">
              <el-select v-model="formDialog.rentId"
                         :disabled="formDialog.id"
                         filterable placeholder="请选择">
                <el-option
                  v-for="item in CUSTOM_customers"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 10, offset: 0}">
            <el-form-item prop="gCode" label="群组编码">
              <el-input type="text"
                        v-model="formDialog.gCode"
                        placeholder="群组编码" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 10, offset: 2}">
            <el-form-item prop="appId" label="所属应用">
              <el-select v-model="formDialog.appId"
                         :disabled="formDialog.id"
                         filterable placeholder="请选择">
                <el-option
                  v-for="item in APP_app"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSearch" :close="dialogSearchInit" :closeTip="false">
      <p slot="title">{{dialogSearch.title}}<span>{{'群组名称：' + dialogSearch.row.gName}}</span></p>
      <s-table :table="tableSearch"
               :control="false"
               :expand="false"
               @http="tableWatch">
        <el-table-column
          fixed="right"
          slot="operation"
          align="center"
          label="可用操作"
          width="100">
          <template scope="s">
            <el-button :plain="s.row.role === 1" type="info" :icon="s.row.role === 1?'star-off':'star-on'" size="mini" v-if="s.row.role !== 3" @click="tableSearchManage(s.row)"></el-button>
            <el-button type="danger" icon="delete" size="mini" v-if="s.row.role !== 3" @click="tableSearchDelete(s.row)"></el-button>
          </template>
        </el-table-column>
      </s-table>
      <el-button slot="footer" type="info" @click="dialogAddUserOpen(dialogSearch.row)">添加用户</el-button>
      <el-button slot="footer" type="info" @click="dialogSearchSave">好</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogAuth" :close="dialogAuthInit">
      <p slot="title">{{dialogAuth.title}}<span>{{'群组名称：' + dialogAuth.row.gName}}</span></p>
      <el-tree
        :data="treeAuth.data"
        show-checkbox
        ref="treeAuth"
        node-key="key">
      </el-tree>
      <el-button slot="footer" type="info" @click="dialogAuthSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogDatas" :close="dialogDatasInit">
      <p slot="title">{{dialogDatas.title}}<span>{{'群组名称：' + dialogDatas.row.gName}}</span></p>
      <el-transfer
        :titles="['未添加数据集','已添加数据集']"
        class="__transfer"
        v-model="dialogDatas.ids"
        ref="transfer"
        filterable
        :filter-method="transferFilterMethod"
        :render-content="transferRenderContent"
        filter-placeholder="请输入 -n 数据集名称,-p 数据项名称"
        @click.native="transferClickColor"
        :data="dialogDatas.data">
        <span slot="left-footer" class="__transfer_footer">
          <el-button class="transfer-footer _refresh" size="small" :loading="dialogDatas.refresh" @click="dialogDatasRefresh"><i v-show="!dialogDatas.refresh" :class="['fa','fa-refresh','fa-fw', 'refresh']"></i> 刷新</el-button>
          <el-button class="transfer-footer" type="success" size="small" @click="windowOpen" v-if="USER.auth.indexOf('datas')!==-1">管理数据集</el-button>
        </span>
      </el-transfer>
      <el-button slot="footer" type="info" @click="dialogDatasSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogAddUser" :close="dialogAddUserInit">
      <p slot="title">{{dialogAddUser.title}}<span>{{'群组名称：' + dialogSearch.row.gName}}</span></p>
      <s-table :table="tableAddUser"
               ref="tableAddUser"
               :multiSelect="true"
               @http="tableWatch">
        <el-form-item label="用户姓名" prop="name">
          <el-input type="text"
                    class="input"
                    v-model="autoVueTable_name"
                    placeholder="用户姓名" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
      <el-button slot="footer" type="info" @click="dialogAddUserSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogAuthSearch" :close="dialogAuthSearchInit" :closeTip="false">
      <p slot="title">{{dialogAuthSearch.title}}<span>{{'群组名称：' + dialogAuthSearch.row.gName}}</span></p>
      <el-row>
        <el-col :xs="24" :lg="{span: 10, offset: 0}">
          <p>功能权限</p>
          <el-tree :data="dialogAuthSearch.row.func"></el-tree>
        </el-col>
        <el-col :xs="24" :lg="{span: 10, offset: 2}">
          <p>数据权限</p>
          <el-tree :data="dialogAuthSearch.row.datas"></el-tree>
        </el-col>
      </el-row>
      <el-button slot="footer" type="info" @click="dialogAuthSearchSave">好</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSearchSearch" :close="dialogSearchSearchInit" :closeTip="false">
      <p slot="title">{{dialogSearchSearch.title}}数据集<span>{{dialogSearchSearch.datasname + ':' + dialogSearchSearch.dName}}</span></p>
      <s-form :form="formDialogSearchSearch" ref="formDialogSearchSearch">
        <el-form-item prop="ids" label="数据集内容">
          <el-tree
            ref="tree1"
            :data="dialogSearchSearch.tree.data"
            node-key="key">
          </el-tree>
        </el-form-item>
      </s-form>
      <el-button slot="footer" type="primary" @click="dialogSearchSearchOk">好</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';

  function __form () {
    return {
      id: {value: 0, rule: [], notes: 'id'},
      gCode: {
        value: '',
        rule: [ 'vNull' ],
        notes: '群组编码',
      },
      gName: {
        value: '',
        rule: ['vNull'],
        notes: '群组名称',
      },
      gDesc: {value: '', rule: [], notes: '群组描述'},
      icon: {value: '', rule: [], notes: '群组图标'},
      rentId: {value: 1, rule: [], notes: '所属客户'},
      appId: {value: 2, rule: [], notes: '所属应用'},
    };
  }
  function __formDialogSearchSearch () {
    return {
      id: {value: 0},
      dName: {value: '', rule: ['vNull']},
      ids: {value: [], rule: []},
    };
  }

  export default AutoVue({
    name: 'group-safety',
    transition: 'slide-fade',
    store: ['USER', 'CUSTOM_customers', 'APP_app'],
    data: {
      table: {
        column: [
          {label: '群组名称', prop: 'gName', minWidth: '0px', search: true},
          {label: '所属应用', prop: 'show_appId', minWidth: '0px'},
          {label: '群组编码', prop: 'gCode', minWidth: '0px'},
          {label: '创建者', prop: 'gCreater', minWidth: '0px'},
          {
            label: '创建时间',
            prop: 'gCreatetime',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 1);
            },
          },
          {label: '群组描述', prop: 'gDesc', minWidth: '0px'},
          {label: '群组图标', prop: 'icon', minWidth: '0px'},
          {label: '所属客户', prop: 'show_rentId', minWidth: '0px'}],
        url: '/group/',
        key: 'id',
        tableColumn: 5,
      },
      tableSearch: {
        column: [
          {label: '群组角色', prop: 'show_role', minWidth: '100px'},
          {label: '用户名称', prop: 'show_userId_name', minWidth: '100px', search: true},
          {label: '用户账号', prop: 'show_userId_account', minWidth: '100px', search: true},
        ],
        url: '/group/',
        key: 'id',
        tableColumn: 3,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
      },
      dialogSearch: {
        title: '查看群组',
        row: {},
      },
      dialogAuth: {
        title: '群组权限分配',
        row: {},
      },
      treeAuth: {
        data: [],
        ids: [],
      },
      dialogDatas: {
        title: '群组分配数据集',
        size: 'large',
        row: {},
        ids: [],
        idsOld: [],
        data: [],
        refresh: false,
      },
      tableAddUser: {
        column: [
          {label: '用户姓名', prop: 'name', minWidth: '0px', search: true},
          {label: '所属客户', prop: 'show_rent', minWidth: '0px', search: true},
          {label: '所属组织', prop: 'orgName', minWidth: '0px', search: true},
          {label: '账号', prop: 'userAccount', minWidth: '0px'},
          {label: '用户类型', prop: 'show_type', minWidth: '0px'},
          {label: '电子邮箱', prop: 'email', minWidth: '0px'},
          {
            label: '创建时间',
            prop: 'createDate',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 1);
            },
          },
        ],
        url: '',
        key: 'id',
        tableColumn: 3,
      },
      dialogAddUser: {
        title: '添加用户到群组',
      },
      dialogAuthSearch: {
        title: '权限',
        row: {
          func: [],
          datas: [],
        },
        size: 'large',
      },
      dialogSearchSearch: {
        title: '新增',
        formRef: 'formDialogSearchSearch',
        tree: {
          data: [],
          size: 0,
        },
        datasname: '',
        dName: '',
      },
      formDialogSearchSearch: __formDialogSearchSearch(),
    },
    methods: {
      moreClick (row) {
        console.log(row);
        if (typeof row.role === 'undefined') {
          this.get('/grpm/searchrole/' + row.id)
            .then(value => {
              this.$set(row, 'role', value.show_roleid);
            });
        }
      },
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      tableDelete (row) {
        this.$confirm(`您将解散${row.gName}群组。`, '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/group/delete/', [row.id]);
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableSearchManage (row) {
        this.$confirm(`您将在 ${this.dialogSearch.row.gName} 群组中，把 ${row.show_userId_name + (row.role === 1 ? ' 提升为管理员 ' : ' 贬低为普通用户 ')}。`, '确认？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/grpm/change', {
                userId: row.userId,
                gId: row.gId,
              });
              this.tableWatch('tableSearch');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableSearchDelete (row) {
        this.$confirm(`您将${row.show_userId_name}踢出${this.dialogSearch.row.gName}群组。`, '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/grpm/delete/' + row.id + '/');
              this.tableWatch('tableSearch');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableMultiDelete () {
        this.$confirm('您将解散这些群组。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let step = [];
            for (let item of this.table.multipleSelection) {
              step.push(item.id);
            }
            try {
              await this.post('/group/delete/', step);
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },

      dialogInit () {
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        (async () => {
          if (this.CUSTOM_customers.length < 1) {
            this.SET('CUSTOM', await this.get('/custom/'));
          }
        })();
        (async () => {
          if (this.APP_app.length < 1) {
            this.SET('APP', await this.get('/app/getAll'));
          }
        })();
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        // let more = this.dialog.saveParameter;
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              let {id} = await this.post('/group/add', option);
              let json = await this.get('/group/' + id);
              this.table.data = [json[0], ...this.table.data];
              this.table.total++;
              this.resetFields('formDialog');
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            try {
              await this.post('/group/add', option);
              let id = option.id;
              let json = await this.get('/group/' + id);
              for (let i = 0; i < this.table.data.length; i++) {
                if (this.table.data[i].id === id) {
                  for (let index in this.table.data[i]) {
                    if (this.table.data[i].hasOwnProperty(index)) {
                      this.table.data[i][index] = json[0][index];
                    }
                  }
                }
              }
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },

      dialogSearchInit () {
        this.dialogSearch.row = {};
      },
      async dialogSearchOpen (more) {
        this.tableSearch.url = '/grpm/' + more.id;
        this.dialogSearch.row = more;
        this.tableWatch('tableSearch');
        this.dialogSearch.visible = true;
      },
      dialogSearchSave () {
        this.dialogSearchInit();
        this.dialogSearch.visible = false;
      },

      dialogAuthInit () {
        this.dialogAuth.row = {};
      },
      async dialogAuthOpen (row) {
        this.dialogAuth.visible = true;
        this.dialogAuth.row = row;
        let {ids, contentList} = await this.get('/groupfunc/' + row.id);
        this.treeAuth.data = contentList;
        let stepIds = [];
        this.$nextTick(() => {
          for (let key of ids) {
            if (this.$refs.treeAuth.store.nodesMap[key].childNodes.length === 0) {
              stepIds.push(key);
            }
          }
          this.treeAuth.ids = ids;
          this.$refs.treeAuth.setCheckedKeys(stepIds);
        });
      },
      async dialogAuthSave () {
        let tree = this.$refs.treeAuth;
        let add = [];
        let del = [];
        let ids = tree.getCheckedKeys(true);
        let idsParent = [];
        let addIdsParent = key => {
          let parent = tree.store.nodesMap[key].parent;
          if (typeof parent.key === 'undefined' || idsParent.indexOf(parent.key) !== -1) return;
          idsParent.push(parent.key);
          addIdsParent(parent.key);
        };
        for (let item of ids) {
          addIdsParent(item);
        }
        ids = [...ids, ...idsParent];
        let idsOld = this.treeAuth.ids;
        for (let item of ids) {
          if (idsOld.indexOf(item) === -1) {
            add.push(item);
          }
        }
        for (let item of idsOld) {
          if (ids.indexOf(item) === -1) {
            del.push(item);
          }
        }
        await this.post('/groupfunc/add', {
          add,
          del,
          id: this.dialogAuth.row.id,
        });
        this.dialogAuthInit();
        this.dialogAuth.visible = false;
      },

      dialogDatasInit () {
        this.dialogDatas.row = {};
        this.dialogDatas.ids = [];
        this.dialogDatas.idsOld = [];
        this.dialogDatas.data = [];
        this.dialogDatas.refresh = false;
      },
      async dialogDatasOpen (row) {
        let {ids, contentList} = await this.get('/groupdataset/' + row.id);
        this.dialogDatas.row = row;
        this.dialogDatas.ids = ids;
        this.dialogDatas.idsOld = ids;
        this.dialogDatas.data = contentList;
        this.dialogDatas.visible = true;
      },
      async dialogDatasRefresh () {
        this.dialogDatas.refresh = true;
        let {contentList} = await this.get('/groupdataset/' + this.dialogDatas.row.id);
        this.dialogDatas.data = contentList;
        this.dialogDatas.refresh = false;
      },
      dialogDatasSave: async function () {
        let {ids, idsOld, row} = this.dialogDatas;
        let add = [];
        let del = [];
        for (let item of ids) {
          if (idsOld.indexOf(item) === -1) {
            add.push(item);
          }
        }
        for (let item of idsOld) {
          if (ids.indexOf(item) === -1) {
            del.push(item);
          }
        }
        try {
          await this.post('/groupdataset/add', {
            id: row.id,
            add,
            del,
          });
          this.dialogDatasInit();
          this.dialogDatas.visible = false;
        } catch (err) {
          console.log(err);
        }
      },

      transferClickColor () {
        setTimeout(() => {
          Array.from(this.$refs.transfer.$el.querySelectorAll('.el-transfer-panel__item')).forEach(div => {
            div.classList[!div.querySelector('span.is-checked') ? 'remove' : 'add']('checked');
          });
        }, 100);
      },
      transferFilterMethod (query, item) {
        if (query.indexOf('-') === 0) {
          let step = [];
          query.split(' ').find(q => {
            step.push(q.trim());
          });
          switch (step[0]) {
          case '-n':
          case '-N':
            return item.label.indexOf(step[1]) > -1;
          case '-p':
          case '-P':
            return item.datasname.indexOf(step[1]) > -1;
          default:
            return true;
          }
        } else {
          return (item.label.indexOf(query) > -1 || item.datasname.indexOf(query) > -1);
        }
      },
      transferRenderContent (h, option) {
        return (
          <div>
            <span class="transfer_content_button" on-click={ event => this.transferShow(event, option) }><i class="fa fa-search" aria-hidden="true"></i></span>
            <span class="label show_label">{option.label}</span>
            <span class="label datasname">{option.datasname}</span>
          </div>
        );
      },
      transferShow (event, option) {
        this.dialogSearchSearchOpen(option);
        event.stopPropagation();
      },

      async dialogSearchSearchOpen (row) {
        this.dialogSearchSearch.title = '查看';
        this.dialogSearchSearch.datasname = row.datasname;
        this.dialogSearchSearch.dName = row.label;
        this.dialogSearchSearch.tree.data = await this.get('/datasetImpl/' + row.key);
        for (let index in this.formDialogSearchSearch) {
          if (this.formDialogSearchSearch.hasOwnProperty(index)) {
            if (typeof row[index] !== 'undefined') {
              this.formDialogSearchSearch[index] = row[index];
            }
          }
        }
        this.dialogSearchSearch.visible = true;
      },
      dialogSearchSearchOk () {
        this.dialogSearchSearchInit();
        this.dialogSearchSearch.visible = false;
      },
      dialogSearchSearchInit () {
        this['formDialogSearchSearch'] = {
          ...this['formDialogSearchSearch'],
          ...this.ObjectClone(__formDialogSearchSearch()),
        };
        this.dialogSearchSearch.tree.data = [];
        this.dialogSearchSearch.tree.datasname = '';
        this.dialogSearchSearch.tree.dName = '';
      },

      dialogAddUserInit () {
        this.tableClear('tableAddUser');
      },
      dialogAddUserOpen () {
        this.dialogAddUser.visible = true;
        this.tableAddUser.url = 'user/userlist/' + this.dialogSearch.row.id;
        this.tableWatch('tableAddUser');
      },
      dialogAddUserSave: async function () {
        let ids = this.tableIds('tableAddUser');
        try {
          await this.post('/grpm/addgroup', {
            gId: this.dialogSearch.row.id,
            ids: ids,
          });
          this.dialogAddUserInit();
          this.tableWatch('tableSearch');
          this.dialogAddUser.visible = false;
        } catch (err) {
          console.log(err);
        }
      },

      dialogAuthSearchInit () {
        this.dialogAuthSearch.row = {
          func: [],
          datas: [],
        };
      },
      async dialogAuthSearchOpen (row) {
        let {func, datas} = await this.get('/groupdataset/details/' + row.id);
        row.func = func;
        row.datas = datas;
        this.dialogAuthSearch.row = row;
        this.dialogAuthSearch.visible = true;
      },
      dialogAuthSearchSave: async function () {
        this.dialogAuthSearchInit();
        this.dialogAuthSearch.visible = false;
      },
      windowOpen () {
        window.open('/safety/datas');
      },
    },
    mounted: function () {
      this.tableWatch('table');
      console.log(this);
    },
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .group .__transfer .el-checkbox__label{
    .label{
      padding-right: 5px;
    }
    .show_label{

    }
    .datasname{
      color: #0affce;
    }
  }
  ._refresh {
    &:hover {
      .refresh {
        animation: fa-spin 1.3s infinite linear;
      }
    }
  }
</style>
